---
title: Multiple Select
description: A flexible dropdown input that enables users to select multiple options, ideal for tagging, categorization, and filtering tasks.
order: 3
status: alpha
published: true
references: ["https://react-spectrum.adobe.com/react-aria/ComboBoxhtml#props", "https://react-spectrum.adobe.com/react-aria/TagGroup.html#props"]
---

## Basic

The basic multiple select component lets you select multiple options from a list. It displays selected options with Tag components.
<How toUse="pickers/multiple-select/multiple-select-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/multiple-select
```

## Composed components
<Composed components={['field', 'list-box', 'popover', 'tag-group', 'search-field']} />

## Manual installation
```bash
npm i react-aria-components react-aria @heroicons/react
```

<SourceCode toShow='multiple-select' />

## Anatomy
```
import { MultipleSelect, MultipleSelectItem, MultipleSelectLabel, MultipleSelectSection } from "@/components/ui/multiple-select"
```

```
<MultipleSelect
  className="min-w-2xs max-w-min"
  placeholder="Select fruits"
  aria-label="Fruits"
  items={fruits}
>
  {(item) => {
    return (
      <MultipleSelect.Item textValue={item.name}>
        {item.name}
      </MultipleSelect.Item>
    )
  }}
</MultipleSelect>
```

## Controlled
This component lets you select tags dynamically, updating the list with callbacks on add and remove. It displays selected tags with Tag components and logs each action.
<How toUse="pickers/multiple-select/multiple-select-controlled-demo" />

## Invalid
When the component is invalid, it displays an error message.
<How toUse="pickers/multiple-select/multiple-select-invalid-demo" />

## Disabled
When the component is disabled, it prevents the user from adding or removing tags.
<How toUse="pickers/multiple-select/multiple-select-disabled-demo" />
